<script setup lang="ts">
import {computed, onMounted} from 'vue';
import {SolveHistoryVO} from "../../../../generated";

interface Props {
  data: SolveHistoryVO;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({
    easyCount: 0,
    mediumCount: 0,
    hardCount: 0,
    solvedEasy: 0,
    solvedMedium: 0,
    solvedHard: 0
  })
});

onMounted(()=>{
  console.log(props.data);
})

const radius = 65;
const strokeWidth = 8;
const normalizedRadius = radius - strokeWidth * 2;
const circumference = normalizedRadius * 2 * Math.PI;
const center = radius;

// 计算总数和已解决数
const total = computed(() => {
  const easyCount = Number(props.data.easyCount || 0);
  const mediumCount = Number(props.data.mediumCount || 0);
  const hardCount = Number(props.data.hardCount || 0);
  return easyCount + mediumCount + hardCount;
});

const solved = computed(() => {
  const solvedEasy = Number(props.data.solvedEasy || 0);
  const solvedMedium = Number(props.data.solvedMedium || 0);
  const solvedHard = Number(props.data.solvedHard || 0);
  return solvedEasy + solvedMedium + solvedHard;
});

// 计算每个难度的进度
const segments = computed(() => {
  // 每个部分占据圆环的三分之一
  const segmentLength = circumference / 3;

  return {
    easy: {
      length: segmentLength,
      progress: Number(props.data.solvedEasy || 0) / Number(props.data.easyCount || 1),
      offset: 0
    },
    medium: {
      length: segmentLength,
      progress: Number(props.data.solvedMedium || 0) / Number(props.data.mediumCount || 1),
      offset: segmentLength
    },
    hard: {
      length: segmentLength,
      progress: Number(props.data.solvedHard || 0) / Number(props.data.hardCount || 1),
      offset: segmentLength * 2
    }
  };
});
</script>

<template>
  <div class="progress-container">
    <div class="main-content">
      <div class="progress-ring">
        <svg
            :height="200"
            :width="200"
            viewBox="0 0 130 130"
        >
          <defs>
            <linearGradient id="easyGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#00af9b"/>
              <stop offset="100%" stop-color="#00af9b"/>
            </linearGradient>
            <linearGradient id="mediumGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#ffd429"/>
              <stop offset="100%" stop-color="#ffd429"/>
            </linearGradient>
            <linearGradient id="hardGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#ff375f"/>
              <stop offset="100%" stop-color="#ff375f"/>
            </linearGradient>
            <linearGradient id="easyBgGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#00af9b" stop-opacity="0.15"/>
              <stop offset="100%" stop-color="#00af9b" stop-opacity="0.15"/>
            </linearGradient>
            <linearGradient id="mediumBgGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#ffd429" stop-opacity="0.15"/>
              <stop offset="100%" stop-color="#ffd429" stop-opacity="0.15"/>
            </linearGradient>
            <linearGradient id="hardBgGradient" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#ff375f" stop-opacity="0.15"/>
              <stop offset="100%" stop-color="#ff375f" stop-opacity="0.15"/>
            </linearGradient>
          </defs>

          <!-- 背景圆环 -->
          <circle
              v-for="(segment, type) in segments"
              :key="`bg-${type}`"
              class="progress-ring__circle"
              :stroke-width="strokeWidth"
              :stroke="`url(#${type}BgGradient)`"
              :stroke-dasharray="`${segment.length} ${circumference}`"
              :stroke-dashoffset="-segment.offset"
              :r="normalizedRadius"
              :cx="center"
              :cy="center"
          />

          <!-- 进度圆环 -->
          <circle
              v-for="(segment, type) in segments"
              :key="`progress-${type}`"
              class="progress-ring__circle"
              :stroke-width="strokeWidth"
              :stroke="`url(#${type}Gradient)`"
              :stroke-dasharray="`${segment.length * segment.progress} ${circumference}`"
              :stroke-dashoffset="-segment.offset"
              :r="normalizedRadius"
              :cx="center"
              :cy="center"
          />

          <!-- 分隔点 -->
          <circle
              v-for="(angle, index) in [0, 120, 240]"
              :key="angle"
              class="progress-ring__dot"
              :cx="center + Math.cos((angle - 90) * Math.PI / 180) * normalizedRadius"
              :cy="center + Math.sin((angle - 90) * Math.PI / 180) * normalizedRadius"
              r="4"
              :class="`progress-ring__dot--${index === 0 ? 'easy' : index === 1 ? 'medium' : 'hard'}`"
          />
        </svg>

        <div class="progress-content">
          <div class="big-number">{{ solved }}</div>
          <div class="total">/{{ total }}</div>
          <div class="status">已解答</div>
        </div>
      </div>
    </div>
    <div class="stats-details">
      <div class="stat-row">
        <div class="stat-label easy">简单</div>
        <div class="stat-value">{{ props.data.solvedEasy }}/{{ props.data.easyCount }}</div>
      </div>
      <div class="stat-row">
        <div class="stat-label medium">中等</div>
        <div class="stat-value">{{ props.data.solvedMedium }}/{{ props.data.mediumCount }}</div>
      </div>
      <div class="stat-row">
        <div class="stat-label hard">困难</div>
        <div class="stat-value">{{ props.data.solvedHard }}/{{ props.data.hardCount }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  width: 100%;
  min-height: 200px;

  @media (max-width: 768px) {
    flex-direction: column;
    min-height: auto;
    gap: 16px;
    align-items: center;
  }
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (max-width: 768px) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.progress-ring {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    width: 160px;
    height: 160px;
  }
}

.progress-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.big-number {
  font-size: 24px;
  font-weight: bold;
  color: #262626;
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: 20px;
  }
}

.total {
  color: #8c8c8c;
  font-size: 14px;
  margin-bottom: 4px;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.status {
  color: #00af9b;
  font-size: 14px;
  margin-bottom: 2px;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.progress-ring__circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: all 0.35s;
  fill: none;
}

.stats-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px;
  min-width: 100px;
  width: 140px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    flex-direction: row;
    width: 100%;
    padding: 0;
    justify-content: center;
    gap: 12px;
  }
}

.stat-row {
  background-color: #FAFAFA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 6px;
  border-radius: 6px;

  @media (max-width: 768px) {
    flex: 1;
    max-width: 120px;
  }
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
}

.stat-label.easy {
  color: #00af9b;
}

.stat-label.medium {
  color: #ffd429;
}

.stat-label.hard {
  color: #ff375f;
}

.stat-value {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
}

.progress-ring__dot {
  transition: all 0.35s;
}

.progress-ring__dot--easy {
  fill: #00af9b;
}

.progress-ring__dot--medium {
  fill: #ffd429;
}

.progress-ring__dot--hard {
  fill: #ff375f;
}

.progress-ring svg {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
